<template>
  <px-scrollbar v-show="!isMain && isView" class="view-equip-detail">
    <px-button style="margin: 16px 0" type="primary" icon="back" @click="backMainPage"> 返回 </px-button>
    <h4 style="margin: 10px 0">{{ loanReturnData.toolBorrowCode }}工具借用单详情</h4>
    <px-table :data="loanReturnData.borrowRevertList" class="equip-table" size="small" height="calc(100vh - 280px)" border>
      <px-table-column type="index" label="序号" width="64" show-overflow-tooltip />
      <px-table-column prop="toolCode" label="工具编码" min-width="200" show-overflow-tooltip />
      <px-table-column prop="toolCategoryDesc" label="工具分类" min-width="120" show-overflow-tooltip />
      <px-table-column prop="toolName" label="工具名称" min-width="120" show-overflow-tooltip />
      <px-table-column prop="toolFactoryAreaDesc" label="工具厂区" min-width="100" show-overflow-tooltip />
      <px-table-column prop="factoryAreaDesc" label="借用单厂区" min-width="100" show-overflow-tooltip />
      <px-table-column prop="toolUnitDesc" label="工具单位" min-width="100" show-overflow-tooltip />
      <px-table-column prop="classNameDesc" label="工具科室" min-width="100" show-overflow-tooltip />
      <px-table-column prop="toolModel" label="型号/规格" min-width="120" show-overflow-tooltip />
      <px-table-column prop="brandVal" label="品牌" min-width="120" show-overflow-tooltip />
      <px-table-column prop="assetTagDesc" label="资产标签" min-width="120" show-overflow-tooltip />
      <px-table-column prop="custodianName" label="管理人" min-width="120" show-overflow-tooltip />
      <px-table-column prop="toolBorrowerName" label="借用人" min-width="120" show-overflow-tooltip />
      <px-table-column prop="toolBorrowerPhone" label="借用人电话" min-width="150" show-overflow-tooltip />
      <px-table-column prop="toolBorrowDate" label="借用时间" min-width="150" show-overflow-tooltip />
      <px-table-column prop="toolBorrowUse" label="借出用途" min-width="140" show-overflow-tooltip />
      <px-table-column prop="revertStatus" label="归还状态" min-width="100" show-overflow-tooltip>
        <template #default="scope">
          <px-tag
            effect="plain"
            :style="{
              color: 'rgba(0, 0, 0, 0.8)',
              border: `1px solid ${scope.row.revertStatus === 1 ? '#4CCBA1' : '#F7B648'}`,
              backgroundColor: `${scope.row.revertStatus === 1 ? '#E8F8F3' : '#FEF5E6'}`
            }"
          >
            {{ scope.row.revertStatusDesc }}
          </px-tag>
        </template>
      </px-table-column>
      <px-table-column prop="toolRevertDate" label="归还时间" min-width="150" show-overflow-tooltip />
      <px-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
      <px-table-column prop="scrapName" label="报废人" min-width="140" show-overflow-tooltip />
      <px-table-column prop="scrapDate" label="报废时间" min-width="150" show-overflow-tooltip />
      <px-table-column prop="scrapReasonDesc" label="报废原因" min-width="160" show-overflow-tooltip />
    </px-table>
  </px-scrollbar>
</template>
<script setup lang="ts">
import { queryLoanDetail } from "@/api/equip/toolManage";
import { computed, reactive, toRefs, watch } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps({
  // 主页面/详情页面
  isMain: {
    type: Boolean,
    default: false
  },
  // 查看or新增/编辑
  isView: {
    type: Boolean,
    default: false
  },
  // 工具借用单id
  toolBorrowId: {
    type: Number,
    default() {
      return undefined;
    }
  }
});
const state = reactive<any>({
  loanReturnData: []
});
const { loanReturnData } = toRefs(state);

// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);

// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    const data = await queryLoanDetail({ id: props.toolBorrowId });
    loanReturnData.value = data;
  }
});
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
</style>
